import { defineComponent, reactive, onMounted, computed } from "vue";
import ECharts from "@/components/ECharts";
import { getDoubanStaticData } from "@/api/douban";
import wordData from "./word.json";
import "./style.scss";

export default defineComponent({
  name: "movieStatistic",
  setup() {
    const { namemap } = wordData;
    const state = reactive({
      locaData: [{ name: "中国", count: 0 }],
    });

    const options = computed(() => {
      return {
        title: {
          text: "豆瓣作品数量",
          top: 20,
          left: "center",
          textStyle: {
            fontSize: 24,
            fontWeight: 600,
            color: "#fff",
          },
        },

        tooltip: {
          trigger: "item",
          formatter: (val: any) => {
            if (!val.data) {
              return "";
            }``
            return val.data.name + ": " + val.data.value;
          },
        },

        visualMap: {
          type: "continuous",
          show: true,

          min: 0,
          max: 5000,

          textStyle: {
            fontSize: 14,
            color: "#fff",
          },
          realtime: false,
          calculable: true,

          inRange: {
            color: ["#fff", "#F5222D"],
          },
        },

        series: [
          {
            type: "map",

            name: "世界地图",
            mapType: "world",

            roam: true,

            label: {
              show: false,
            },

            itemStyle: {
              areaColor: "#7B68EE",
              borderWidth: 0.5,
              borderColor: "#000",
              borderType: "solid",
            },

            emphasis: {
              label: {
                show: true,
                color: "#fff",
              },
              itemStyle: {
                areaColor: "#FF6347",
              },
            },

            nameMap: namemap,

            data: state.locaData.map((item: any) => {
              return {
                name: item.location,
                value: item.count,
              };
            }),
          },
        ],
      };
    });

    const options2 = computed(() => {
      return {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        grid: {
          top: "20%",
          left: "3%",
          right: "3%",
          height: "80%",
          bottom: "10%",
          containLabel: true,
        },
        legend: {
          data: ["数量", "平均评分"],
        },
        xAxis: [
          {
            type: "category",
            data: state.locaData.map((item: any) => item.location),
            axisLabel: {
              interval: 0,
              rotate: 40,
            },
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "数量",
            min: 0,
            axisLabel: {
              formatter: "{value} 个",
            },
          },
          {
            type: "value",
            name: "平均评分",
            min: 5,
            max: 10,
          },
        ],
        series: [
          {
            name: "数量",
            type: "bar",
            data: state.locaData.map((item: any) => item.count),
          },

          {
            name: "平均评分",
            type: "line",
            yAxisIndex: 1,
            data: state.locaData.map((item: any) => item.avg_rate),
          },
        ],
      };
    });

    const pieOption = computed(() => {
      let sum = 0;
      if (state.locaData[0]) {
        sum = state.locaData[0].count;
      }
      return {
        tooltip: {
          trigger: "item",
          formatter: (obj: any) => {
            console.log(obj);
            return "";
          },
        },
        legend: {
          orient: "vertical",
          left: 10,
          data: ["全部"],
        },
        series: [
          {
            name: "数量占比",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "30",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [{ value: sum, name: "全部" }],
          },
        ],
      };
    });

    onMounted(async () => {
      state.locaData = await getDoubanStaticData();
    });
    
    return () => {
      return (
        <div class="full movie-static">
          <ECharts options={options.value} />
          {/* <div class="bottom-chart">
            <ECharts options={options2.value} theme="dark" />
          </div>
          <div class="left-con">
            <ECharts options={pieOption.value} theme="dark" />
          </div>
          <div class="right-con"></div> */}
        </div>
      );
    };
  },
});
